
export default {
  group: "Echarts",
  componentName: 'EChart',
  title: '图表',
  category: '基础图表',
  configure: {
    supports: {
      style: true,
    },
    props: [
      {
        title: '图表大小',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'width',
            title: {
              label: '宽度',
              tip: '宽度',
            },
            setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
            defaultValue: 500
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '高度',
            },
            setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
            defaultValue: 300
          },
        ]
      },
      {
        name: 'title',
        title: '标题',
        display: 'accordion',
        setter: [{
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'show',
                  title: '是否显示',
                  setter: ['BoolSetter'],
                  defaultValue: true,
                },
                {
                  name: 'text',
                  title: '标题文本',
                  setter: ['StringSetter']
                },
                {
                  name: 'left',
                  title: '水平对齐',
                  defaultValue: 'left',
                  setter: [{
                    componentName: 'SelectSetter',
                    props: {
                      options: [
                        {
                          title: '自动',
                          value: 'anto',
                        },
                        {
                          title: '靠左',
                          value: 'left',
                        },
                        {
                          title: '靠右',
                          value: 'right',
                        },
                        {
                          title: '居中',
                          value: 'center',
                        },
                      ],
                    },
                  },
                    'StringSetter',
                    'VariableSetter'
                  ],
                },
                {
                  name: 'textStyle',
                  title: '字体样式',
                  setter: [
                    {
                      componentName: 'ObjectSetter',
                      props: {
                        config: {
                          items: [
                            {
                              name: 'color',
                              title: '颜色',
                              setter: ['ColorSetter'],
                              defaultValue: '#333'
                            },
                            {
                              name: 'fontSize',
                              title: '字体大小',
                              setter: ['StringSetter'],
                              defaultValue: '18'
                            }
                          ]
                        }
                      }
                    },
                    "JsonSetter"
                  ]
                },
              ]
            }
          }
        },
          'JsonSetter'
        ]
      },
      {
        name: "xAxis",
        title: 'x轴',
        display: 'block',
        setter: [{
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'data',
                  title: '数据',
                  // defaultValue: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                  setter: ['JsonSetter']
                }
              ],
            },
          },
        }, 'JsonSetter'],
        condition: (target: any) => {
          return target.getProps().getPropValue('series')[0].type !== 'pie';
        },
      },
      {
        name: 'yAxis',
        title: 'y轴',
        display: 'block',
        setter: [{
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'type',
                  title: '类型',
                  defaultValue: 'value',
                  setter: {
                    componentName: 'SelectSetter',
                    props: {
                      options: [
                        {
                          title: '数值轴',
                          value: 'value',
                        },
                        {
                          title: '类目轴',
                          value: 'category',
                        },
                        {
                          title: '时间轴',
                          value: 'time',
                        },
                        {
                          title: '对数轴',
                          value: 'log',
                        },
                      ],
                    },
                  },
                }
              ],
            },
          },
        }, 'JsonSetter'],
        condition: (target: any) => {
          return target.getProps().getPropValue('series')[0].type !== 'pie';
        },
      },
      {
        name: 'series',
        title: "图表属性",
        display: 'block',
        setter: [{
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'data',
                      title: '数据',
                      setter: ['JsonSetter'],
                      // defaultValue: [150, 230, 224, 218, 135, 147, 260],
                    },
                    {
                      name: 'type',
                      title: '类型',
                      setter: ['StringSetter'],
                      // defaultValue: 'line'
                    },
                    {
                      name: 'smooth',
                      title: '平滑',
                      setter: "BoolSetter",
                      condition: (target: any) => {
                        return target.getProps().getPropValue('series')[target.path[1]].type === 'line';
                      },
                    }
                  ],
                },
              },
            },
            initialValue: () => {
              return {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
                smooth: false
              };
            },
          },
        }, 'JsonSetter'],
        supportVariable: true,
      },
      {
        name: 'option',
        title: "自定义属性",
        display: 'block',
        setter: ['JsonSetter']
      }
    ],
  },
  snippets: [
    {
      title: '折线图',
      screenshot: require('./__screenshots__/line.png'),
      schema: {
        componentName: "EChart",
        props: {
          series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }],
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          width: 500,
          height: 300
        }
      }
    },
    {
      title: '柱状图',
      screenshot: require('./__screenshots__/bar.png'),
      schema: {
        componentName: "EChart",
        props: {
          series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'bar'
          }],
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          width: 500,
          height: 300
        }
      }
    },
    {
      title: '饼图',
      screenshot: require('./__screenshots__/pie.png'),
      schema: {
        componentName: "EChart",
        props: {
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ],

            }
          ],
          width: 500,
          height: 300,
        }
      }
    }
  ]
};
